<template>
    <view :class="'cell ' + (disabled ? 'disabled' : '') + ' ' + (actived ? 'actived' : '')" :style="styles">
        <view class="cell-body">
            <view class="cell-touch" @tap="onBindTap">
                <view class="cell-left">
                    <view class="cell-icon">
						<template v-if="customPrefix==='false'">
							<image
								:src="icon" 
								lazy-load 
								class="cell-image" 
								:style="{backgroundColor: color,borderRadius:radius?'100%':'0',width:size+'rpx',height:size+'rpx'}" 
								v-if="icon"
							></image>
						</template>
						<template v-else>
							<uni-icons :custom-prefix="customPrefix" :type="icon" :size="size" :color="color" style="margin-left: 20rpx;" v-if="icon"></uni-icons>
						</template>
                        <slot name="icon"></slot>
                    </view>
                    <view class="cell-headline">
                        <view :style="{'maxWidth':cellTitleWitch}" class="cell-title">{{ title }}</view>
                        <slot name="title"></slot>
                        <view class="cell-sub-title">{{ subTitle }}</view>
                        <slot name="subTitle"></slot>
                    </view>
                </view>
                <view class="cell-right">
                    <text class="cell-tips" :style="'padding-right:' + (more ? '' : '20rpx')">{{ tips }}</text>
                    <slot name="tips" @tap.native.stop.prevent="onCatchTap"></slot>
                    <view class="cell-arrow-outer" v-if="more">
                        <view class="cell-arrow"></view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/touch/touch.js
export default {
    data() {
        return {};
    },
    options: {
        multipleSlots: true,
        // 在组件定义时的选项中启用多slot支持
        styleIsolation: 'apply-shared' // 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面
    },
    /**
     * 组件的属性列表
     */
    props: {
        styles: {
            type: String,
            default: ''
        },
		// 自定义图标
		customPrefix:{
			type:String,
			default:'iconfont'
		},
        // 图标图像
        icon: {
            type: String,
            default: ''
        },
		// 图标尺寸
		size:{
			type:Number,
			default:24
		},
		// 图标或图片颜色
        color: {
            type: String,
            default: ''
        },
		cellTitleWitch:{
			type: String,
			default: '50vw'
		},
		// 圆角图标
		radius:{
			type:Boolean,
			default:false
		},
        // 标题（名称）
        title: {
            type: String,
            default: ''
        },
        // 小标题（名称）
        subTitle: {
            type: String,
            default: ''
        },
        // 提示（说明）
        tips: {
            type: String,
            default: ''
        },
        // 箭头
        more: {
            type: Boolean,
            default: true
        },
        // 禁用
        disabled: {
            type: Boolean,
            default: false
        },
        // 选中
        actived: {
            type: Boolean,
            default: false
        },
        // 跳转
        to: {
            type: String,
            default: ''
        },
        // 事件是否可用
        isTap: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        // 跳转或操作
        onBindTap(ev) {
            // console.log('onBindTap:', ev);
            // 禁用时
            if (this.disabled) {
                return;
            } // 事件不可用时

            if (!this.isTap) {
                return;
            } // 有to且不为空的情况下，做跳转处理

            if (this.to !== '') {
                uni.navigateTo({
                    url: this.to
                });
            } // 否则自定义事件处理
            else {
                this.$emit('jftap', {
                    detail: ev
                });
            }
        },

        onCatchTap(ev) {
            return;
        }
    },
    beforeMount: function () {
        // 在组件实例进入页面节点树时执行
    },
    destroyed: function () {
        // 在组件实例被从页面节点树移除时执行
    },
    onPageShow: function () {
        // 页面被展示
    },
    onPageHide: function () {
        // 页面被隐藏
    },
    onPageResize: function (size) {
        // 页面尺寸变化
    }
};
</script>
<style>
.cell {
    display: flex;
    justify-content: space-between;
    width: 100%;
    overflow: hidden;
    background: #ffffff;
    margin-bottom: 1px;
}

.cell:link {
    background-color: #ffffff;
}

.cell:visited {
    background-color: #ffffff;
}

.cell:hover {
    background-color: #ffffff;
}

.cell:active {
    background-color: #eeeeee;
}

.cell-body {
    width: 100%;
    margin-right: 0;
    transition: all 0.4s;
}

.cell-touch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding:24rpx 20rpx; */
}

.cell-left {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
}

.cell-right {
    display: flex;
    justify-content: left;
    flex-direction: row;
    align-items: center;
}

.cell-icon {}
.cell-image {
    display: block;
    width: 72rpx;
    height: 72rpx;
    margin-left: 20rpx;
}
.cell-headline {
    text-align: left;
    padding: 20rpx;
    min-height: 44rpx;
}
.cell-title {
    font-size: 30rpx;
	max-width: 50vw; 
	overflow: hidden; 
	text-overflow:ellipsis;
	white-space: nowrap;
}

.cell-sub-title,
.cell-tips {
    font-size: 24rpx;
    color: #999999;
	max-width: 50vw;
	overflow: hidden; 
	text-overflow:ellipsis;
	white-space: nowrap;
}

.cell-arrow-outer {
    width: 22rpx;
    height: 44rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20rpx;
}
.cell-arrow {
    width: 10rpx;
    height: 10rpx;
    border-width: 2rpx;
    border-style: solid;
    border-color: #666666;
    border-left-color: transparent;
    border-bottom-color: transparent;
    transform: rotate(45deg);
}

/* 禁用 */
.disabled {
    cursor: not-allowed;
    background: #fbfcfd;
}
.disabled:link,
.disabled:visited,
.disabled:hover,
.disabled:active {
    background-color: #fbfcfd;
}

.disabled .cell-title {
    color: #999999;
}
.disabled .cell-sub-title,
.disabled .cell-tips {
    color: #cccccc;
}
.disabled .cell-arrow {
    border-color: #cccccc;
    border-left-color: transparent;
    border-bottom-color: transparent;
}

/* 选中 */
.actived {
    background: #f0faff;
}
.actived:link,
.actived:visited,
.actived:hover,
.actived:active {
    background-color: #e5eef3;
}

.actived .cell-title {
    color: mediumblue;
}
.actived .cell-sub-title,
.actived .cell-tips {
    color: #89bbf0;
}
.actived .cell-arrow {
    border-color: #89bbf0;
    border-left-color: transparent;
    border-bottom-color: transparent;
}
</style>
